import { Table, Button, Skeleton, Tag } from 'antd'
import { LayoutOutlined } from '@ant-design/icons'
import ContentLayout from '@/layouts/ContentLayout'
import { useEffect, useState } from 'react';
import ArrayUtils from '@/utils/ArrayUtils';
import { PROJECT_CASE_PLAN } from '@/consts/project'
import CheckActon from '../../CheckActoin'
import UserBrief from '@/components/UserBrief'
import QaCasePlanAddModal from './QaCasePlanAddModal'
import QaCasePlanDetail from './QaCasePlanDetail';
import { pageCasePlan } from '@/services/project/casePlan'

export const QaCasePlanStatus = (props) => {
    const {
        status
    } = props

    if (status || status === 0) {
        return <Tag color={PROJECT_CASE_PLAN[status].color}>{PROJECT_CASE_PLAN[status].name}</Tag>
    }
    return (
        <Tag>/</Tag>
    )
}

const QaCasePlanList = (props) => {

    const {
        qaDetail,
        projectId,
        dispatch,
    } = props;

    const [showMe, setShowMe] = useState(true);
    const [qaCasePlanListVisiable, setQaPlanCaseListVisiable] = useState();
    const [showCasePlanDetail, setShowCasePlanDetail] = useState(false);
    const [selectCasePlan, setSelectCasePlan] = useState({});
    const [qaCasePlanPage, setQaCasePlanPage] = useState({})
    const [qaCasePlanPageLoading, setQaCasePlanPageLoading] = useState({})
    const [params, setParams] = useState({

    })

    useEffect(() => {
        onParamChange()
    }, [qaDetail])

    const onParamChange = (param) => {
        if (param && !param.pageNum) {
            param.pageNum = 1;
        }
        let newParams = { ...params, ...param }
        setParams(newParams)
        queryqaCasePlanPage(newParams)
    }

    const queryqaCasePlanPage = (queryParams) => {
        setQaCasePlanPageLoading(true)
        pageCasePlan(projectId, qaDetail.id, (queryParams || params))
            .then((result) => {
                setQaCasePlanPage(result.data);
                setQaCasePlanPageLoading(false)
            })

    }


    const tableColumns = [
        {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
            width: "120px",
            fixed: 'left',
            ellipsis: {
                showTitle: true,
            },
            sorter: (a, b) => a.name.localeCompare(b.name),
        },
        {
            title: '状态',
            dataIndex: 'status',
            ellipsis: true,
            key: 'status',
            render: (text, record) => <QaCasePlanStatus status={record.status} />,
        },
        {
            title: '负责人',
            dataIndex: 'userId',
            ellipsis: true,
            key: 'userId',
            width: "140px",
            render: (text, record) => <UserBrief user={record.user}></UserBrief>,
        },
        {
            title: '完成时间',
            dataIndex: 'endDate',
            key: 'endDate',
            sorter: (a, b) => a.endDate && a.endDate.localeCompare(b.endDate),
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
            width: "160px",
            // sorter: (a, b) => a.createTime.localeCompare(b.createTime),
            defaultSortOrder: 'descend'
        }
    ]

    const filterColumn = (tableColumns) => {
        if (showCasePlanDetail) {
            return tableColumns.filter(column => column.key === 'name'
                || column.key === 'status'
            )
        }

        return tableColumns;
    }

    const queryItems = [
        {
            name: "inStatus",
            label: "阶段类型",
            isMain: true,
            type: "tagSelect",
            options: ArrayUtils.jsonToArray(PROJECT_CASE_PLAN).map((item) => ({
                value: item.key,
                label: item.value.name
            }))
        },
        {
            name: "likeName",
            label: "名称",
            isMain: false,
            type: "input",
        },
        {
            name: "inUserId",
            label: "负责人",
            isMain: false,
            type: "input",
        }
    ]

    const actionHeader = [
        <Button type="primary" size="middle" onClick={() => {
            setQaPlanCaseListVisiable(true)
        }}>
            新增
        </Button>,
        <CheckActon
            check={showCasePlanDetail}
            onChange={(value) => {
                setShowCasePlanDetail(value)
            }}
            label={<LayoutOutlined />}
        />,
        <CheckActon
            check={showMe}
            onChange={(value) => {
                setShowMe(value)
            }}
            label={'只看我的'}
        />
    ];

    if (!qaDetail) {
        return <Skeleton></Skeleton>
    }

    return (<>
        <ContentLayout
            queryItems={queryItems}
            actionHeader={actionHeader}
            onQueryChange={(params) => {
                onParamChange(params)
            }}
            style={{ minWidth: "100%" }}
            content={
                <Table
                    onChange={(pagination, filters, sorter) => {
                        onParamChange({
                            pageNum: pagination.pageSize === params.pageSize ? pagination.current : 1,
                            pageSize: pagination.pageSize
                        }, true)
                    }}
                    columns={filterColumn(tableColumns)}
                    rowKey="id"
                    loading={qaCasePlanPageLoading}
                    dataSource={qaCasePlanPage && qaCasePlanPage.list}
                    pagination={{
                        position: ["bottomCenter"],
                        showSizeChanger: true,
                        pageSize: params.pageSize || 10,
                        total: qaCasePlanPage && qaCasePlanPage.count,
                        current: qaCasePlanPage && qaCasePlanPage.pageNum,
                        pageSizeOptions: [10, 20, 50],
                        showTotal: (total, range) => `总数： ${total} `
                    }}
                    size="small"
                    onRow={record => {
                        return {
                            onClick: () => {
                                setShowCasePlanDetail(true);
                                setSelectCasePlan(record)
                            }
                        }
                    }}
                >
                </Table>
            }
            hasSider={showCasePlanDetail}
            siderSpan={18}
            sider={
                <QaCasePlanDetail projectId={projectId}
                    casePlanId={selectCasePlan && selectCasePlan.id}
                    casePlanData={selectCasePlan}
                    onDetailChange={(data) => {
                        // 更新列表元素
                        let qaCasePlanList = qaCasePlanPage.list.map((item) => {
                            if (item.id === selectCasePlan.id) {
                                return {
                                    ...data
                                }
                            }
                            return item
                        })
                        setQaCasePlanPage({
                            ...qaCasePlanPage,
                            list: qaCasePlanList
                        })
                    }}
                ></QaCasePlanDetail>
            }
        />
        <QaCasePlanAddModal
            visible={qaCasePlanListVisiable}
            projectId={projectId}
            projectQaItemId={qaDetail.id}
            qaDetail={qaDetail}
            projectProdItemId={qaDetail.projectProdItemId}
            onCancel={() => {
                setQaPlanCaseListVisiable(false)
            }}
            onSaveSuccess={() => {
                setQaPlanCaseListVisiable(false);
                onParamChange({})
            }}
        ></QaCasePlanAddModal>
    </>)

}


export default QaCasePlanList;
